<form class="layui-form" method="post">
    <div class="layui-form-item" style="padding-top: 2%">
        <label class="layui-form-label">主机平台：</label>
        <div class="layui-input-inline">
            <if condition="$date['id'] neq null">
                <volist name=":C('ServerProvider')" id="vo">
                    <if condition="$date['service_id'] eq $vo['val']"><span style="display: block;  padding: 9px 0px;">{$vo['$key']}</span></if>
                </volist>
                <else/>
                <select name="serverid" lay-verify="required" lay-filter="service">
                    <option value=""></option>
                    <volist name=":C('ServerProvider')" id="vo">
                        <option value="{$vo['val']}" <eq name="i" value="1">selected</eq> <if condition="!$vo['is_display']">disabled</if> >{$key}</option>
                    </volist>
                </select>
            </if>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地域选择：</label>
        <div class="layui-input-inline">
            <select name="regions" lay-verify="required" id="regions" lay-filter="regions">
                <option value="">请先选择主机平台</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">主机镜像：</label>
        <div class="layui-input-inline">
            <select name="imgid" lay-verify="required" id="imgcontent" lay-filter="img">
                <option value="">请先选择服务平台</option>
            </select>
        </div>
        <div class="layui-input-inline"><span style="color: red;">注意：美团镜像是地区下面的镜像</span></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地区选择：</label>
        <div class="layui-input-block">
            <select name="zone" lay-verify="required" id="zone" lay-filter="zone">
                <option value="">请先选择主机平台</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">机型选择：</label>
        <div class="layui-input-block">
            <select name="instancetype" lay-verify="required" id="instancetype" lay-filter="instancetype">
                <option value="">请先选择主机平台</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">主机配置：</label>
        <div class="layui-input-block">
            <select name="host" lay-verify="required" id="host" lay-filter="host">
                <option value="">请先选择服务平台</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">创建方式：</label>
        <div class="layui-input-block">
            <select name="hostTypeByte" lay-verify="required" id="hostTypeByte" lay-filter="hostTypeByte">
                <option value="">请先选择服务平台</option>
                <option value="1">立即创建</option>
                <option value="2">定时创建</option>
            </select>
            <div id="dateHostTaskTime">

            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">开通数量：</label>
        <div class="layui-input-inline">
            <input type="text" name="hostnumber" lay-verify="required|number" value="1" maxlength="2" placeholder="" class="layui-input">
        </div>
        <span style="display: block;  padding: 9px 0px;">台</span>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="sitesub">提交</button>
        </div>
    </div>
</form>
<script id="imgtpl" type="text/html">
    <option value="{{d.id}}"{{#if(d.k==1){}}selected{{#} }}>{{d.name}}</option>
</script>
<script>
    form.render();
    var regionsurl="{:U('MyService/zone')}";
    var imglist,hostlist = {},serid=1,regionsid='',regionsname='',zoneid='',instancetypeid='';
    getregions();
    function getregions(){
        $('#regions').html('<option value=""></option>');
        $('#imgcontent').html('<option value=""></option>');
        $('#zone').html('<option value=""></option>');
        $('#instancetype').html('<option value=""></option>');
        $('#host').html('<option value=""></option>');
        form.render('select');
        var loadahsde=layer.load(1, {shade: [0.8, '#393D49'], time: 100000});
        $.post(regionsurl,{keyid:serid},function(data){
            layer.close(loadahsde);
            if(data.code=101){
                $html='';
                layui.each(data.data,function(key,item){
                    if(key == 0){
                        $html += '<option value="' + item.region + '" selected>' + item.name + '</option>'
                        regionsid=item.region;
                        regionsname=item.name;
                    }else {
                        $html += '<option value="' + item.region + '">' + item.name + '</option>'
                    }
                });
                $('#regions').html($html);

            }else{
                layer.msg(data.msg,{icon: 5});
                return;
            }
            form.render('select');
            getimg();
        });

    }
    form.on('select(service)', function(data){
        serid=data.value;
        getregions();
    });

    function getimg(){
        var loadahsde=layer.load(1, {shade: [0.8, '#393D49'], time: 100000});
        imglist ={};
        hostlist={};
        $.get('__SELF__',{ser_id:serid,regionsid:regionsid,regionsname:regionsname},function(data){
            layer.close(loadahsde);
            if(data.code == '4001'){
                layer.msg(data.msg,{icon: 5});
                return;
            }else if(data.code == '101'){
                imglist =data['data']['hostimg'];
                hostlist=data['data']['host'];
                imgcontent.innerHTML='<option value=""></option>';
                layui.each(imglist, function (key, val) {
                    val.k=key;
                    var getTpl = imgtpl.innerHTML;
                    laytpl(getTpl).render(val, function (html) {
                        imgcontent.innerHTML += html;
                    });
                });
                form.render('select');
                if(hostlist) {
                    renderzone();
                }else{
                    layer.msg("该地域没有主机可选",{icon: 5});
                }
            }else{
                layer.msg("数据错误",{icon: 5});
                return;
            }
        });
    }

    form.on('select(regions)',function(data) {
        regionsname = data.elem[data.elem.selectedIndex].text;
        regionsid=data.value;
        $('#imgcontent').html('<option value=""></option>');
        $('#zone').html('<option value=""></option>');
        $('#instancetype').html('<option value=""></option>');
        $('#host').html('<option value=""></option>');
        form.render('select');
        getimg();
    });

    function renderzone(){
        $('#zone').html('<option value=""></option>');
        var i=0;
        zonehtml='';
        layui.each(hostlist, function (key, val) {
            name=key.split(":")[1];
            zonehtml += '<option value="'+key+'"';
            if(i==0) {zonehtml+=' selected';zoneid=key;}
            zonehtml+='>' + name + '</option>'
            i++;
        });
        $('#zone').html(zonehtml);
        form.render('select');
        instancetype();
    }
    form.on('select(zone)', function(data){
        zoneid=data.value;
        instancetype();

    });
    function instancetype(){
        $('#instancetype').html('<option value=""></option>');
        var instancetypehtml='';
        var i=0;
        var name=[];
        layui.each(hostlist[zoneid],function(key,item){
            name=key.split(":");
            instancetypehtml += '<option value="'+key+'"';
            /* if (!name.hasOwnProperty(1)) {
             if(i==0) {instancetypehtml+=' selected';describeTypesid=key;}
             instancetypehtml+='>' + key + '</option>'
             } else {*/
            if(i==0) {instancetypehtml+=' selected';describeTypesid=key;}
            instancetypehtml+='>' + key + '</option>'
            // }
            i++;
        });
        $('#instancetype').html(instancetypehtml);
        form.render('select');
        instance();
    }
    form.on('select(instancetype)', function(data){
        describeTypesid=data.value;
        instance();

    });

    function instance(){
        $('#host').html('<option value=""></option>');
        var hosthtml='';
        var i=0;
        layui.each(hostlist[zoneid][describeTypesid],function(key,item){
            hosthtml += '<option value="'+item['id']+'"';
            if(i==0) {hosthtml+=' selected';}
            hosthtml+='>('+item['dataother']['sdktype']+')-'+item['dataother']['hostcpu']+"核"+'/'+item['dataother']['sdk']+'</option>';
            i++;
        });
        $('#host').html(hosthtml);
        form.render('select');
    }

    form.on('select(hostTypeByte)',function(data){
        if(data.value == 1){
            $('#dateHostTaskTime').html('');
            form.render();
        }else{
            $('#dateHostTaskTime').html('<input class="layui-input" placeholder="建议在抢购任物提前两个小时执行" name="tasktime" lay-verify="required" onclick="layui.laydate({elem: this, istime: true, format:'+"'"+'YYYY-MM-DD hh:mm:ss'+"'"+'})">');
            form.render();
        }
    });



    form.on('submit(sitesub)', function(data){
        var userInfo = data.field;
        var url = "__SELF__";
        loadsconrent = layer.load(1, {shade: [0.8, '#393D49'], time: 10000000, area: ['100px', '100px']});
        $.post(url,userInfo,function(data){
            layer.close(loadsconrent);
            if(data.code == '4001'){
                layer.msg(data.msg,{icon: 5});
                return;
            }else if(data.code == '101'){
                layer.close(loadsconrent);
                layer.msg(data.msg, {
                    icon: 6,
                    time: 2000
                }, function(){
                    location.reload();
                });
            }else{
                layer.msg("数据错误",{icon: 5});
                return;
            }
        }).error(function(XMLHttpRequest, textStatus, errorThrown) {
            if(XMLHttpRequest.status != 200){
                layer.msg("服务器响应超时拉",{ time: 10000, icon: 5}, function(){
                    layer.close(loadsconrent);
                });
            }
        });


        return false;
    });

</script>